<template>
  <Drawer title="标注详情" :has-footer="false" size="600px">
    <el-form
      ref="formRef"
      label-suffix="："
      label-position="left"
      label-width="90px"
      v-if="label"
    >
      <el-form-item label="名称" prop="name">
        <el-input v-model="label.name" placeholder="请输入名称" disabled />
      </el-form-item>
      <el-form-item label="类型" prop="type">
        <el-radio-group v-model="label.type" disabled>
          <el-radio
            :value="item.id"
            v-for="item in LABEL_TYPES"
            :key="item.id"
            >{{ item.name }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <el-form-item label="标注内容" prop="content">
        <el-input
          disabled
          v-if="label.type === EnumLabelType.Text"
          v-model="label.content"
          type="textarea"
        ></el-input>
        <span style="color: #a8abb2; margin-right: 5px" v-if="label.filePath">
          {{ label.filePath }}
        </span>
        <el-button
          v-if="label.type !== EnumLabelType.Text && label.filePath"
          @click="handleDownload"
          >下载</el-button
        >
      </el-form-item>
      <el-form-item label="圆角" prop="radius">
        <el-input-number
          disabled
          v-model="label.radius"
          :min="0"
          controls-position="right"
        >
          <template #suffix>
            <span>PX</span>
          </template>
        </el-input-number>
      </el-form-item>
      <el-form-item label="背景色" prop="backgroundColor">
        <el-color-picker v-model="label.backgroundColor" disabled />
      </el-form-item>
    </el-form>
  </Drawer>
</template>

<script setup lang="ts">
import { computed } from 'vue'

import Drawer from '@/components/Drawer/index.vue'
import { downloadLinkFile } from '@/http/pointLabel'
import downloadJs from '@/plugins/download'

import { EnumLabelType, LABEL_TYPES } from '../config/config'
import { ILabel } from '../hooks/useThree'

const props = defineProps<{
  labels: ILabel[]
  editId: string
}>()

const label = computed(() => {
  return props.labels.find((e) => e.id === props.editId)
})

const handleDownload = async () => {
  if (!label.value) return
  const res = await downloadLinkFile({
    dotLabelId: label.value?.id,
  })
  downloadJs(res.blob, res.fileName || '')
}
</script>

<style scoped lang="scss"></style>
